<template>
    <IDrawer v-model="defaultValue" :loading="loading" :width="1200" title="对接设置">
        <Form :model="data" :label-width="120" :rules="ruleValidate" ref="formCreate">
            <ListProduct :customer="data.customer_id" v-model="data.products"></ListProduct>
            <Row>
                <Col :span="12">
                    <FormItem label="订单号" prop="number">
                        <Input v-model="data.number" disabled></Input>
                    </FormItem>
                </Col>
                <Col :span="12">
                    <FormItem label="客户名称" prop="customer_id">
                        <RemoteSelect url="common/select/customer" v-model="data.customer_id" disabled></RemoteSelect>
                    </FormItem>
                </Col>
                <Col :span="12">
                    <FormItem label="快递公司" prop="express_id">
                        <RemoteSelect :url="`common/select/express`" v-model="data.express_id"></RemoteSelect>
                    </FormItem>
                </Col>
                <Col :span="12">
                    <FormItem label="运费" prop="freight">
                        <Input v-model="data.freight" number></Input>
                    </FormItem>
                </Col>
                <Col :span="12">
                    <FormItem label="订购人" prop="buyer_name">
                        <Input v-model="data.buyer_name"></Input>
                    </FormItem>
                </Col>
                <Col :span="12">
                    <FormItem label="订购人证件类型" prop="buyer_type">
                        <Select v-model="data.buyer_type" disabled>
                            <Option value="1">身份证</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col :span="12">
                    <FormItem label="订购人证件号码" prop="buyer_number">
                        <Input v-model="data.buyer_number"></Input>
                    </FormItem>
                </Col>
                <Col :span="12">
                    <FormItem label="订购人手机号码" prop="buyer_telephone">
                        <Input v-model="data.buyer_telephone"></Input>
                    </FormItem>
                </Col>
                <Col :span="12">
                    <FormItem label="收件人" prop="receiving_name">
                        <Input v-model="data.receiving_name"></Input>
                    </FormItem>
                </Col>
                <Col :span="12">
                    <FormItem label="收件人电话" prop="receiving_phone">
                        <Input v-model="data.receiving_phone"></Input>
                    </FormItem>
                </Col>
                <Col :span="12">
                    <FormItem label="省/市/区" prop="areas">
                        <al-cascader data-type="name" v-model="data.areas" level="2"></al-cascader>
                    </FormItem>
                </Col>
                <Col :span="12">
                    <FormItem label="收件地址" prop="address">
                        <Input v-model="data.address"></Input>
                    </FormItem>
                </Col>

                <Col :span="12">
                    <FormItem label="电商企业代码" prop="ebc_code">
                        <Input v-model="data.ebc_code"></Input>
                    </FormItem>
                </Col>
                <Col :span="12">
                    <FormItem label="电商企业名称" prop="ebc_name">
                        <Input v-model="data.ebc_name"></Input>
                    </FormItem>
                </Col>
                <Col :span="12">
                    <FormItem label="电商平台代码" prop="ebp_code">
                        <Input v-model="data.ebp_code"></Input>
                    </FormItem>
                </Col>
                <Col :span="12">
                    <FormItem label="电商平台名称" prop="ebp_name">
                        <Input v-model="data.ebp_name"></Input>
                    </FormItem>
                </Col>

                <Col :span="24">
                    <FormItem label="备注" prop="remark">
                        <Input v-model="data.remark" type="textarea"></Input>
                    </FormItem>
                </Col>
            </Row>

        </Form>
        <div slot="footer">
            <Button type="primary" icon="ios-add" @click="submit('formCreate')">提交</Button>
            <Button type="warning" icon="md-log-out" @click="defaultValue = false">返回</Button>
        </div>
    </IDrawer>
</template>

<script>
    import IForm from "../../../components/content/form";
    import contentDrawer from "../../../mixins/contentDrawer";
    import IDrawer from "../../../components/content/drawer";
    import IData from "./data";
    import RemoteSelect from "../../../components/form/remoteSelect";
    import ListProduct from "./listProduct";
    import IViewArea from 'iview-area';
    import Vue from 'vue';

    Vue.use(IViewArea);

    export default {
        name: "update",
        mixins: [contentDrawer, IData],
        components: {ListProduct, RemoteSelect, IForm, IDrawer},
        data() {
            return {}
        },
        mounted(){
            this.getData();
        },
        methods: {
            getData(){
                this.loading = true;
                this.$http.get(`order/index/${this.props.id}/edit`, this.data).then((res) => {
                    this.data = res;
                }).finally(() => {
                    this.loading = false;
                });
            },
            submit(data) {
                this.validate(data).then(() => {
                    this.loading = true;
                    this.$http.put(`order/index/${this.props.id}`, this.data).then(() => {
                        this.defaultValue = false;
                    }).finally(() => {
                        this.loading = false;
                    });
                });
            }
        }
    }
</script>

<style scoped>

</style>
